<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>参考链接：https://codepen.io/Chokcoco/pen/JjvPjrN</title>
</head>
<link rel="stylesheet" href="../../common.css">
<style>
  body {
    background: #fff;
  }

  .g-grid {
    position: relative;
    margin: auto;
    width: 401px;
    height: 451px;
    outline: 1px solid #000;
    outline-offset: 5px;
    background: linear-gradient(#fff, #fff), repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px), repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 50px), repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px), linear-gradient(45deg, transparent, transparent calc(50% - 0.5px), #000 calc(50% - 0.5px), #000 calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 0), repeating-linear-gradient(45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px), linear-gradient(-45deg, transparent, transparent calc(50% - 0.5px), #000 calc(50% - 0.5px), #000 calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 0), repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px), linear-gradient(45deg, transparent, transparent calc(50% - 0.5px), #000 calc(50% - 0.5px), #000 calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 0), repeating-linear-gradient(45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px), linear-gradient(-45deg, transparent, transparent calc(50% - 0.5px), #000 calc(50% - 0.5px), #000 calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 0);
    background-repeat: no-repeat;
    background-size: calc(100% - 2px) 49px, 100% 100%, 100% 100%, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px;
    background-position: 1px 201px, 0 0, 0 0, 151px 0, 151px 0, 151px 0, 151px 0, 151px 350px, 151px 350px, 151px 350px, 151px 350px;
    line-height: 451px;
    font-size: 24px;
    text-align: center;
    letter-spacing: 12px;
    white-space: pre-wrap;
  }

  .g-grid::before {
    content: "";
    position: absolute;
    top: 95px;
    left: 35px;
    width: 10px;
    height: 1px;
    background: #000;
    color: #000;
    box-shadow: 20px 0, 0 10px, 20px 10px, 300px 0, 320px 0, 300px 10px, 320px 10px, -30px 50px, -30px 60px, 50px 50px, 50px 60px, 70px 50px, 70px 60px, 150px 50px, 150px 60px, 170px 50px, 170px 60px, 250px 50px, 250px 60px, 270px 50px, 270px 60px, 350px 50px, 350px 60px;
    -webkit-box-reflect: below 259px;
  }

  .g-grid::after {
    content: "";
    position: absolute;
    top: 85px;
    left: 45px;
    width: 1px;
    height: 10px;
    background: #000;
    color: #000;
    box-shadow: 10px 0, 0 20px, 10px 20px, 300px 0px, 300px 20px, 310px 0, 310px 20px, -40px 50px, -40px 70px, 50px 50px, 50px 70px, 60px 50px, 60px 70px, 150px 50px, 150px 70px, 160px 50px, 160px 70px, 250px 50px, 250px 70px, 260px 50px, 260px 70px, 350px 50px, 350px 70px;
    -webkit-box-reflect: below 260px;
  }
</style>

<body>
  <div class="g-grid"> 楚河 汉界</div>
</body>

</html>